<template>
  <div class='app-container'>
    <div class='app-box'>
         <tabList :type='3'></tabList>
        <div>
             <div class="top"  style="width:300px;">
                <span>出单时间：</span>
                <el-date-picker
                    class='wd230'
                    size="mini"
                    value-format='yyyy-MM-dd'
                    v-model="time1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
             <div class="top1">
                <span>保险公司：</span>
                <el-select  style="    width: 140px;" size="mini" v-model="insuranceId" placeholder="请选择保险公司" >
                    <el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
                        <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
                        </el-option>
                    </el-option-group>
                </el-select>
            </div>
            <div class="top1" style="float:right;width:auto;">
                <el-button size="mini" type='primary' @click="tosearch" style="width:80px;">搜索</el-button>
                <el-button size="mini" type='primary' style="width:80px;">导出</el-button>
            </div>
            	
        </div>


        <div class="table">
             <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                prop="date"
                label="组织机构"
                width="180">
                </el-table-column>
                <el-table-column
                prop="date2"
                label="总保费"
                align='right'>
                </el-table-column>
                <el-table-column
                prop="date3"
                label="佣金"
                align='right'>
                </el-table-column>
                  <el-table-column
                prop="date4"
                label="其他"

                align='right'>
                </el-table-column>
                <el-table-column
                prop="date5"
                label="合计结算金额"
    
                align='right'>
                </el-table-column>
                <el-table-column
                label="操作" width="160" align='right'>
                  <template slot-scope="scope">
        
                        <span  class="switch-btn" @click="tomingxi(scope.row)">查看明细</span>
                         <span  class="switch-btn" v-if="scope.row.type == 0"  @click="tojigou(scope.row)">机构账单</span>
                  </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
  </div>
</template>
<script>

import Vue from "vue";
import tabList from "@/components/billSettlement/tabList.vue";
export default {
// 
 components: { tabList },
  data() {
    return {
        time1:'',
        insuranceId: "",
        companies: [],
        tableData: [
            {
                date: '石家庄分公司',
               date2: '200,000,000.00',
               date3: '3,000.00',
               date4: '3,000.00',
               date5: '3,000.00',
            //    date6: '3,000.00',
                organizationUnitId:'1111',
                type:0

            }
        ],
    }
  },
  filters: {
    lastname(val) {
      let index = val.lastIndexOf("-");
      if (index !== "-1") {
        let sli = val.substr(index + 1, val.length);
        return sli;
      }
    },
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    }
  },
  created() {
   
  },
  mounted(){
        if(this.$route.query.beginDate || this.$route.query.endDate){
            let arrR = [this.$route.query.beginDate,this.$route.query.endDate]
            this.time1 = arrR
        }
        if(this.$route.query.insuranceId){
            this.insuranceId = this.$route.query.insuranceId;
        }
       this.getCompanies();
  },
  methods: {
  
    getCompanies() {
      let that = this;
      let all = {
        letter: "",
        insurances: [{ insuranceName: "全部", id: "" }]
      };
      let params = {};
      this.post(params, "services/app/common/GetGroupInsurances").then(rs => {
        console.log(rs);
        if (rs.success) {
          let result = rs.result.items;
          result.unshift(all);
          that.companies = result;
        }
      });
    },
    //to明细
     tomingxi(val){
        this.$router.push({
            name:"downbillSettlementlist",
            query:{
                organizationUnitId:val.organizationUnitId
            }
        })
    },
    //机构账单
    tojigou(val){
        this.$router.push({
            name:"downbillSettlement",
            query:{
                organizationUnitId:val.organizationUnitId
            }
        })
    },
    tosearch(){
        console.log(this.time1)
        console.log(this.insuranceId)
          this.$router.push({
            name:"downbillSettlement",
            query:{
              insuranceId:this.insuranceId,
              beginDate:this.time1[0],
              endDate:this.time1[1],
            }
        })
    }
  }
};
</script>
<style lang="scss" scoped>
.app-box {
  color: #333;
    .switch-btn {
    color: #027dca;
    margin-left: 10px;
    cursor: pointer;
}
    .top {
        display: inline-block;
        width: 315px;
        margin-bottom: 15px;
    }
    .top1 {
        display: inline-block;
        width: 240px;
        margin-left: 10px
    }
  .unitbox {
    height: 40px;
    line-height: 40px;
    span {
      font-weight: 600;
    }
  }
  .table {
    margin-top: 30px;
  }
  .list-tab {
        padding: 0 20px;
        box-border: border;
        border-bottom: 1px solid #cbcbcb;
        margin-bottom:30px;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
}

</style>
